import React from 'react';
import {Form, Input, Modal, Switch} from "antd";
import {message} from '@/hooks/modules/useMessage';
import Request from "@/service/request";

type DialogApiProps = {
    ref?: React.MutableRefObject<any> | any;
    refresh: () => void;
}

const DialogApi: React.FC<DialogApiProps> = React.forwardRef((props, ref) => {
    //父组件刷新列表事件
    const {refresh} = props

    const [form] = Form.useForm();
    //打开或关闭弹窗
    const [dialogVisible, setDialogVisible] = React.useState<boolean>(false);
    //modal提交loading
    const [confirmLoading, setConfirmLoading] = React.useState<boolean>(false);
    //编辑状态下当前行数据
    const [row, setRow] = React.useState<Record<string, any>>({});

    //打开弹窗
    const showModal = (indexOrigin: number, rowItem: Record<string, any> = {}) => {
        if (indexOrigin === 2 && Object.keys(rowItem).length) {
            //编辑状态下回显表单数据
            setTimeout(() => {
                form.setFieldsValue({
                    ...rowItem
                })
            })
        }
        setRow({...rowItem, index: indexOrigin})
        setDialogVisible(true);
    };
    //提交表单
    const submit = async (values: Record<string, any>) => {
        setConfirmLoading(true);
        const resp = await Request.post(row.index === 1 ? '/addPermission' : '/updatePermission', row.index === 1 ? values : {
            ...values,
            id: row.id
        }) as any;
        if (resp.code === 200) {
            form.resetFields()
            setConfirmLoading(false);
            setDialogVisible(false);
            refresh()
            message.success(`${row.index === 1 ? '新增权限成功' : '更新权限成功'}`)
        }
    };
    //关闭弹窗
    const closeModal = () => {
        form.resetFields()
        setDialogVisible(false);
    };
    //
    //暴露事件给父组件
    React.useImperativeHandle(ref, () => ({
        showModal,
        closeModal
    }))
    return (
        <>
            <Modal open={dialogVisible}
                   width={590}
                   title={row.index === 1 ? '新增权限' : '编辑权限'}
                   okButtonProps={{autoFocus: true, htmlType: 'submit'}}
                   onCancel={closeModal}
                   destroyOnClose
                   centered
                   confirmLoading={confirmLoading}
                   styles={{body: {padding: '20px'}, footer: {textAlign: 'center'}}}
                   cancelButtonProps={{style: {marginRight: '20px'}}}
                   modalRender={(dom) => (
                       <Form
                           form={form}
                           labelCol={{span: 5}}
                           name="form_in_modal"
                           initialValues={{status: 1}}
                           onFinish={(values) => submit(values)}
                       >
                           {dom}
                       </Form>
                   )}>
                <Form.Item
                    name="permissionName"
                    label="权限名称"
                    rules={[{required: true, message: '请输入权限名称'}]}
                >
                    <Input placeholder="请输入权限名称" allowClear style={{width: '350px'}}/>
                </Form.Item>
                <Form.Item
                    name="urls"
                    label="接口地址"
                    rules={[{required: true, message: '请输入接口地址'}]}
                >
                    <Input placeholder="请输入接口地址" allowClear style={{width: '350px'}}/>
                </Form.Item>
                <Form.Item
                    name="serviceName"
                    label="服务名称"
                    rules={[{required: true, message: '请输入服务名称'}]}
                >
                    <Input placeholder="请输入服务名称" allowClear style={{width: '350px'}}/>
                </Form.Item>
                <Form.Item
                    name="status"
                    label="状态"
                    getValueProps={value => ({checked: value === 1})}
                    getValueFromEvent={checked => (checked ? 1 : 0)}
                >
                    <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                </Form.Item>
            </Modal>
        </>
    );
})

export default React.memo(DialogApi);
